<template>
	<div class="content55 personal">
		<header class="header">
			<div @click="$router.go(-1)" class="left iconfont icon-left"></div>
			<div class="title">{{ $t('Thông tin ngân hàng') }}</div>
		</header>
		<!-- 1、手机号 2、银行名称、3金融机构代码、4支店名5、交易类型 6、囗座番号 7、账户名称 -->
		<div class="title">{{ $t('Thông tin ngân hàng của bạn') }}</div>
		<div class="ditem">
		    <div class="pd">
		        <input type="text" class="input" :placeholder="$t('Vui lòng chọn số điện thoại di động của bạn')" :value="mobile" readonly/>
		    </div>
		</div>
		<div class="ditem">
		    <div class="pd">
		        <input type="text" class="input" :placeholder="$t('Vui lòng chọn tên ngân hàng của bạn')" v-model="data.bank_name"/>
		    </div>
		</div>
		<div class="ditem">
		    <div class="pd">
		        <input type="text" class="input" :placeholder="$t('Nhập mã tổ chức tài chính của bạn')" v-model="data.financial_institution_code"/>
		    </div>
		</div>
		<div class="ditem">
		    <div class="pd">
		        <input type="text" class="input" :placeholder="$t('Nhập tên chi nhánh của bạn')" v-model="data.branch_name"/>
		    </div>
		</div>
		<div class="ditem">
		    <div class="pd">
		        <input type="text" class="input" :placeholder="$t('Nhập loại giao dịch của bạn')" v-model="data.transaction_type"/>
		    </div>
		</div>
		<div class="ditem">
		    <div class="pd">
		        <input type="text" class="input" :placeholder="$t('Nhập tài khoản ngân hàng của bạn')" v-model="data.bank_number"/>
		    </div>
		</div>
		<div class="ditem">
		    <div class="pd">
		        <input type="text" class="input" :placeholder="$t('Vui lòng nhập tên tài khoản của bạn')"  v-model="data.account_holder"/>
		    </div>
		</div>
		<div class="topup" @click="sub" v-if="!userInfo?.bank">{{ $t('Cấu hình') }}</div>

	</div>
</template>

<script>
	import AJAX from '@/utils/http'
	import { mapGetters } from 'vuex';
	export default {
		computed: {
			...mapGetters(['userInfo']),
		},
		data() {
			return {
				data: {},
				mobile:'',
			};
		},
		created() {
			this.fetchData();
		},
		methods: {
			sub(){
				if(this.data.bank_name == '' || this.data.bank_name == undefined){
					this.$toast(this.$t('Vui lòng chọn tên ngân hàng của bạn'));
					return;
				}
				else if(this.data.financial_institution_code == '' || this.data.financial_institution_code == undefined){
					this.$toast(this.$t('Nhập mã tổ chức tài chính của bạn'));
					return;
				}
				else if(this.data.branch_name == '' || this.data.branch_name == undefined){
					this.$toast(this.$t('Nhập mã tổ chức tài chính của bạn'));
					return;
				}
				else if(this.data.transaction_type == '' || this.data.transaction_type == undefined){
					this.$toast(this.$t('Nhập loại giao dịch của bạn'));
					return;
				}
				else if(this.data.bank_number == '' || this.data.bank_number == undefined){
					this.$toast(this.$t('Nhập tài khoản ngân hàng của bạn'));
					return;
				}
				else if(this.data.account_holder == '' || this.data.account_holder == undefined){
					this.$toast(this.$t('Vui lòng nhập tên tài khoản của bạn'));
					return;
				}
				else{
					AJAX.post('/user/bank/save/true', this.data).then(e => {
						if (!e.code) {
							this.$toast(e.msg);
							return;
						}
						// this.$alert(e.msg, 'Ok', () => {
						// 	this.$router.replace('/');
						// });
						this.$alert(e.msg, "Ok", {
						     confirmButtonText: "Ok",
						     callback: action => {
						       this.$router.go(-1);
						     }
						});
					});
				}
			},
			fetchData() {
				AJAX.post('/user/bank', {}).then(e => {
					if (e.data.list) {
						this.data = e.data.list;
					}
					this.mobile = e.data.mobile
				});
			},
		}
	};
</script>

<style scoped>
	.personal > .title{
		margin-bottom: 12px;
		margin-top: 12px;
		font-size: 14px;
		position: relative;
		padding-left: 16px;
	}


	.personal > .title:after {
	    background-color: var(--system-color);
	    border-radius: 50%;
	    content: "";
	    height: 8px;
	    width: 8px;
	    left: 0;
	    position: absolute;
	    top: 50%;
	    -webkit-transform: translateY(-50%);
	    transform: translateY(-50%);
	}

	.ditem{
		margin-bottom: 12px;
	}

	.personal{
		padding-left: 16px;
		padding-right: 16px;
	}
</style>
